<template>
  <view>
    <u-navbar title="详情" :background="{ backgroundColor: '#9CE0FF' }" :border-bottom="false" title-color="#000"
      title-size="37" />

    <view class="p-tb-20 p-lr-30 bg-fff sticky z-4" id="container" :style="{ top: `${top}px` }">
      <view class="oh w-full">
        <text class="fz-36 font-bold color-333333">{{ params.hospitalName }}</text>
        <text class="fz-36 font-bold color-333333" v-if="params.departmentName">/{{ params.departmentName }}</text>
      </view>
      <view class="fz-36 font-bold color-333333 mt-20">{{ dateShowFormat(params) }}工单总详情</view>
    </view>
    <view class="m-lr-20 pb-50 oys">
      <view class="bg-fff mt-20 p-30 box-shadow w-full oh br-10" v-for="(item, index) in dataList" :key="index">
        <view class="flex align-center">
          <text class="fz-40 font-bold text-ellipsis">{{ item.workOrderName || '-' }}</text>
          <view class="h-36 ml-30 tag min-w-100">
            <text class="p-tb-8 p-lr-16 fz-18 br-8" :class="item.orderType === workOrderType[0].value ? 'insp' : item.orderType === workOrderType[1].value ? 'maintenance' : 'repair' ">
              {{ tagLabel(item.orderType) }}
            </text>
          </view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">负责公司:</view>
          <view class="flex1 color-888888">{{ item.companyName || '-' }}</view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">工单开始时间:</view>
          <view class="flex1 color-888888">{{ item.workOrderStartTime || '-' }}</view>
        </view>
        <view class="flex fz-28 mt-20 align-center">
          <view class="color-333333 min-w-230">工单结束时间:</view>
          <view class="flex1 color-888888">{{ item.workOrderEndTime || '-' }}</view>
        </view>
      </view>
    </view>
    <EmptyIcon v-if="!loading && dataList.length === 0" />
  </view>
</template>

<script>
import EmptyIcon from "@/components/EmptyIcon/EmptyIcon";
import { getDetailSubList } from "@/api/statistics/hospital"
import dateShowFormat from '@/mixins/dateShowFormat'
import { DIC } from "@/utils/dict"
import getNavBarHeight from "@/mixins/getNavBarHeight";

export default {
  name: "HospitalOrderDetail",
  components: { EmptyIcon },
  mixins: [dateShowFormat , getNavBarHeight],

  onLoad (option) {
    this.params = JSON.parse(decodeURIComponent(option.queryParams))
    this.init()
  },
  data () {
    return {
      dataList: [],
      params: {},
      hasNext: true,
      loading: true,
      pageNum: 1,
    }
  },
  computed: {
    queryParams () {
      return {
        departmentId: this.params.departmentId,
        companyId: this.params.companyId,
        hospitalId: this.params.hospitalId,
        year: this.params.year,
        month: this.params.month,
        week: this.params.week,
        day: this.params.day,
        unitType: this.params.unitType
      }
    },
    workOrderType(){
      return DIC.workOrderType
    }
  },
  onReachBottom () {
    if (!this.loading && this.hasNext) {
      this.getNextList()
    }
  },
  methods: {
    init () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum
      }
      getDetailSubList(params).then(res => {
        this.dataList = res.rows || []
        this.hasNext = res.hasNext
      }).finally(() => this.loading = false)
    },
    getNextList () {
      this.loading = true
      const params = {
        ...this.queryParams,
        pageSize: 10,
        pageNum: this.pageNum + 1
      }
      getDetailSubList(params).then(res => {
        this.pageNum++
        this.dataList = this.dataList.concat(res.rows)
        this.hasNext = res.hasNext
      }).finally(() => {
        this.loading = false
      })
    },
    tagLabel (orderType) { return DIC.workOrderType.find(el => el.value == orderType)?.label },
  },
}
</script>

<style>
page {
  background-color: #eee;
}
</style>
<style lang="scss" scoped>
.tag {
  transform: scale(.9);
  letter-spacing: 1px
}

.insp {
  color: #2D8CF0;
  background: #ECF5FF;
  border: 1rpx solid #409EFF;
}

.maintenance {
  background: #FDF6EC;
  border: 1rpx solid #F0B65D;
  color: #F0B65D;
}

.repair {
  color: #67C23A;
  background: #F0F9EB;
  border: 1rpx solid #67C23A;
}
</style>
